<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>HOME</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<!--标准mui.css-->
		<link rel="stylesheet" href="../css/mui.min.css">
		<!--App自定义的css-->
		<link rel="stylesheet" type="text/css" href="../css/app.css" />
		<link rel="stylesheet" type="text/css" href="../css/swiper.min.css" />
		<link rel="stylesheet" type="text/css" href="../css/qpad.css" />
		<style type="text/css">
			.wrongans {
				background-color: rgba(238, 44, 44, 0.1);
			}
			
			.rightans {
				background-color: rgba(79, 210, 194, 0.1);
			}
		</style>
	</head>

	<body>
		<div class="swiper-container">
			<div class="swiper-wrapper">
				<div class="swiper-slide"></div>
				<div class="swiper-slide"></div>
				<div class="swiper-slide"></div>
				<div class="swiper-slide"></div>
				<div class="swiper-slide"></div>
				<div class="swiper-slide"></div>
				<div class="swiper-slide"></div>
				<div class="swiper-slide"></div>
				<div class="swiper-slide"></div>
				<div class="swiper-slide"></div>
			</div>
		</div>

	</body>
	<script type="text/html" id="qitem">
		<ul class="mui-table-view">
			<input type="hidden" class="qid" value="{{id}}" />
			<li class="mui-table-view-cell" style="background-color: #f8f8fa;">
				<span class="mui-pull-left">
					<button class="mui-btn mui-btn-primary">
						{{if type=="single_choice"}}单选{{/if}}
						{{if type=="uncertain_choice"}}多选{{/if}}
						{{if type=="determine"}}判断{{/if}}
						{{if type=="material"}}材料题{{/if}}
						{{if type=="essay"}}问答题{{/if}}
					</button>
				</span>
				<span class="mui-pull-left  mui-ellipsis" style="margin-left: 20px;line-height: 33px;width: 50%;font-size: 15px;">
					{{pageParam("testTitle")}}
				</span>
				<span class="mui-pull-right" style="margin-right: 10px;line-height: 33px;font-size: 15px;"><span style="color: #2fa4ea;">{{pageParam("pageno")}}</span>/{{pageParam("totalpage")}}</span>
			</li>
			<li class="mui-table-view-cell selectitems" name="{{id}}" id="{{id}}" data-type="{{type}}">
				<h5 style="font-size: 18px;line-height: 24px;">{{#loadImage(stem)}}</h5> 
				{{if type == "determine"}}
				<h4 class="choiceitem" data-type="{{type}}" onclick="selectAnswer(0,{{id}},{{answer}},this)">
								<span class="selectitem{{if myans}}{{each $toArray(myans)}}{{if $value == 0}} onwrongitem selected{{else}} wrongitem{{/if}}{{/each}}{{else}} wrongitem{{/if}}">	
								</span>
								<span class="answeritem">
									错误
								</span>						
				</h4>
				<div class="clearfix">

				</div>

				<h4 class="choiceitem" data-type="{{type}}" onclick="selectAnswer(1,{{id}},{{answer}},this)">
								<span class="selectitem{{if myans}}{{each $toArray(myans)}}{{if $value == 1}} onrightitem selected{{else}} rightitem{{/if}}{{/each}}{{else}} rightitem{{/if}}">	
								</span>
								<span class="answeritem">
									正确
								</span>						
				</h4> 
				
				
				{{else}} {{each $parse(metas).choices as value i}}
				<h4 class="choiceitem" data-type="{{type}}" onclick="selectAnswer({{i}},{{id}},{{answer}},this)">
								<span class="selectitem">
									{{if i==0}}A{{/if}}
									{{if i==1}}B{{/if}}
									{{if i==2}}C{{/if}}
									{{if i==3}}D{{/if}}
									{{if i==4}}E{{/if}}
									{{if i==5}}F{{/if}}
								</span>
								<span class="answeritem">
									{{#value}}
								</span>						
					</h4> {{/each}} {{/if}}
			</li>

			{{if sub}} {{each sub as vv}} {{if vv}}
			<li class="mui-table-view-cell selectitems" id="{{vv.id}}" name="{{vv.id}}" data-type="{{vv.type}}">
				<h5 style="font-size: 18px;line-height: 24px;">({{if vv.type=="single_choice"}}单选{{/if}}{{if vv.type=="uncertain_choice"}}多选{{/if}}{{if vv.type=="determine"}}判断{{/if}})&nbsp;{{#vv.stem}}</h5> {{if vv.type == "determine"}}
				<h4 class="choiceitem" data-type="{{vv.type}}" onclick="selectAnswer(0,{{vv.id}},{{answer}},this)">
								<span class="selectitem wrongitem">	
								</span>
								<span class="answeritem">
									错误
								</span>						
				</h4>
				<div class="clearfix">

				</div>
				<h4 class="choiceitem" data-type="{{vv.type}}" onclick="selectAnswer(1,{{vv.id}},{{answer}},this)">
								<span class="selectitem rightitem">	
								</span>
								<span class="answeritem">
									正确
								</span>						
				</h4> {{else}} {{each $parse(vv.metas).choices as value i}}
				<h4 class="choiceitem" data-type="{{vv.type}}" onclick="selectAnswer({{i}},{{vv.id}},{{answer}},this)">
									<span class="selectitem">
										{{if i==0}}A{{/if}}
										{{if i==1}}B{{/if}}
										{{if i==2}}C{{/if}}
										{{if i==3}}D{{/if}}
										{{if i==4}}E{{/if}}
										{{if i==5}}F{{/if}}
									</span>
									<span class="answeritem">
										{{#value}}
									</span>						
						</h4> {{/each}} {{/if}}
			</li>
			{{/if}} {{/each}} {{/if}}
			<li class="mui-table-view-cell jiexiArea" style="padding: 15px 15px;min-height: 300px;">
				<div style="background-color: #f8f8fa;padding: 10px 10px;">
					<h4 class="jiexi-title"><img src="../image/xiangjie.png" style="height: 25px;"/></h4>
					<div class="jiexi">
						{{if type != "material"&&type != "essay"}}
						<p>
							答案:{{each $toArray(answer)}} {{if type=="determine"}} {{if $value==0}}错误{{/if}} {{if $value==1}}正确{{/if}} {{else}} {{if $value==0}}A{{/if}} {{if $value==1}}B{{/if}} {{if $value==2}}C{{/if}} {{if $value==3}}D{{/if}} {{if $value==4}}E{{/if}} {{if $value==5}}F{{/if}}
							&nbsp; {{/if}}{{/each}}
						</p>
						{{else}}
							<p>答案:{{$toJson(answer)}}</p>
						{{/if}}

						<p>
							{{#loadImage(analysis)}}
						</p>

					</div>

				</div>

			</li>
		</ul>
	</script>
	<script src="../script/mui.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../script/swiper.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../script/template.js" type="text/javascript" charset="utf-8"></script>
	<script src="../script/template/helper.js" type="text/javascript" charset="utf-8"></script>
	<script src="../script/lokijs.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../script/db.js" type="text/javascript" charset="utf-8"></script>
	<script src="../script/app.js" type="text/javascript" charset="utf-8"></script>
	<script src="../script/myswiper2.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		MYPAGE = {};
		MYPAGE.pageno = 0;

		function checkAnswer(myAns, answer, j) {
			var myAns2 = myAns;
			var myAns = JSON.stringify(myAns);
			myAns = myAns.replace(/\[/, "");
			myAns = myAns.replace(/\]/, "");
			if (myAns == answer) {
				var result = 1;
			} else {
				var result = 0;
			}
			var myAnsStr = "[" + myAns + "]";
			var db = new loki('data');
			db.loadDatabase({}, function() {
				var c = db.getCollection('answers');
				if (c == null) {
					c = db.addCollection('answers');
				}
				var q = {
					'qid': j
				};
				var $line = c.findOne(q);
				if ($line == null) {
					var data = {
						'qid': j,
						'answer': myAnsStr,
						'result': result,
						'lesson': MYPAGE.id
					};
					c.insert(data);
				} else {
					$line.answer = myAnsStr;
					$line.result = result;
					$line.lesson = MYPAGE.id;
					c.update($line)
				}
				db.saveDatabase();
			});
			var current = document.getElementsByName(j);
			for (var k = 0; k < current.length; k++) {
				var type = current[k].getAttribute('data-type');
				if (type != "material") {
					var answeritem = current[k].getElementsByClassName('answeritem');
					var itemlength = answeritem.length;
					if (type == "uncertain_choice") {
						for (var j = 0; j < itemlength; j++) {
							answeritem[j].className = "answeritem";
						}
						//					alert(myAns2);
						//					var myansArr = myAns2.split(",");
						answer = answer.join(',');
						for (var i = 0; i < myAns2.length; i++) {
							//						
							//						alert(answer.indexOf(myAns2[i]));
							if (answer.indexOf(myAns2[i]) > -1) {
								answeritem[myAns2[i]].className = "answeritem rightans"
							} else {
								answeritem[myAns2[i]].className = "answeritem wrongans"
							}
						}
						//					for (var i=0;i<itemlength;i++) {
						//						answeritem[i].className = "answeritem";
						//					}
						//					var index = myAns2;
						//					if (result == 1) {
						//						answeritem[index].className = "answeritem rightans"
						//					}
						//					if (result == 0) {
						//						answeritem[index].className = "answeritem wrongans"
						//					}
					} else {
						for (var i = 0; i < itemlength; i++) {
							answeritem[i].className = "answeritem";
						}
						var index = myAns2;
						if (result == 1) {
							answeritem[index].className = "answeritem rightans"
						}
						if (result == 0) {
							answeritem[index].className = "answeritem wrongans"
						}
					}
				}
			}
			//
			//
			//			api.sendEvent({
			//				name: "showAnswer"
			//			});
		}

		function selectAnswer(k, j, answer, obj) {
			var ans = Array();
			var type = obj.getAttribute('data-type');
			var items = obj.parentNode.getElementsByClassName('selectitem');
			var citem = obj.getElementsByClassName("selectitem")[0];
			if (type == "uncertain_choice") {
				var cClassName = citem.className;
				switch (cClassName) {
					case "selectitem":
						citem.className = "selectitem selected";
						for (var i = 0; i < items.length; i++) {
							if (items[i].className == "selectitem selected") {
								var index = ans.length;
								ans[index] = i;
							}
						}
						checkAnswer(ans, answer, j);
						break;
					case "selectitem selected":
						citem.className = "selectitem";
						for (var i = 0; i < items.length; i++) {
							if (items[i].className == "selectitem selected") {
								var index = ans.length;
								ans[index] = i;
							}
						}
						checkAnswer(ans, answer, j);
						break;
					default:
						citem.className = "selectitem";
						for (var i = 0; i < items.length; i++) {
							if (items[i].className == "selectitem selected") {
								var index = ans.length;
								ans[index] = i;
							}
						}
						checkAnswer(ans, answer, j);
						break;
				}
			} else if (type == "single_choice") {
				var cClassName = citem.className;
				switch (cClassName) {
					case "selectitem":
						for (var i = 0; i < items.length; i++) {
							items[i].className = "selectitem";
						}
						citem.className = "selectitem selected";
						ans[0] = k;
						checkAnswer(ans, answer, j);
						break;
					case "selectitem selected":
						citem.className = "selectitem";
						ans[0] = k;
						checkAnswer(ans, answer, j);
					default:
						citem.className = "selectitem";
						ans[0] = k;
						checkAnswer(ans, answer, j);
						break;
				}
			} else if (type == "determine") {
				var cClassName = citem.className;
				switch (cClassName) {
					case "selectitem rightitem":
						items[1].className = "selectitem wrongitem";
						citem.className = "selectitem onrightitem selected";
						ans[0] = k;
						checkAnswer(ans, answer, j);
						break;
					case "selectitem wrongitem":
						items[0].className = "selectitem rightitem";
						citem.className = "selectitem onwrongitem selected";
						ans[0] = k;
						checkAnswer(ans, answer, j);
						break;
					case "selectitem onrightitem selected":
						citem.className = "selectitem rightitem";
						ans[0] = k;
						checkAnswer(ans, answer, j);
						break;
					case "selectitem onwrongitem selected":
						citem.className = "selectitem wrongitem";
						ans[0] = k;
						checkAnswer(ans, answer, j);
						break;
				}
			}
			//		.className="selectitem selected";
		};

		function swiperNextIndex() {
			//自定义获取下一个slide函数 勿与原api搞混
			var nextindexEle = document.getElementsByClassName('swiper-slide-next')[0];
			if (typeof(nextindexEle) == "undefined") {
				nextindex = 2;
			} else {
				nextindex = parseInt(nextindexEle.getAttribute('data-swiper-slide-index')) + 1;
			}
			if (nextindex == 1) {
				nextindex = 11;
			}
			return nextindex;
			//使用时碰到11与10  应同时更新索引为1与0的slide的内容 处理倒回错误问题
			//			if (nextindex == 11) {
			//				swiper.slides[1].innerHTML = html;
			//			}
			//			if (nextindex == 10) {
			//				swiper.slides[0].innerHTML = html;
			//			}
		}

		function addFavor(qid) {
			var db = new loki('data');
			db.loadDatabase({}, function() {
				var c = db.getCollection('favor');
				if (c == null) {
					c = db.addCollection('favor');
				}
				var q = {
					'id': qid
				};
				var $line = c.findOne(q);
				if ($line == null) {
					var data = {
						'id': qid
					};
					c.insert(data);
				}
				db.saveDatabase();
			});
			api.toast({
				msg: "已收藏"
			});
		}

		function cancelFavor(qid) {
			var db = new loki('data');
			db.loadDatabase({}, function() {
				var c = db.getCollection('favor');
				if (c == null) {
					c = db.addCollection('favor');
				}
				var q = {
					'id': qid
				};
				c.removeWhere(q);
				db.saveDatabase();
			});
		}
		apiready = function() {
			showWaiting();
			var data = api.pageParam;
			MYPAGE.type = data.type;
			MYPAGE.target = data.target;
			MYPAGE.id = data.id;
			var func = function(db) {
				var sql = 'SELECT COUNT(*) as total FROM question where `target` = \'' + MYPAGE.target + '\'';
				if (MYPAGE.type == "random") {
					MYPAGE.parentSql = 'SELECT * FROM question where `target` like \'' + MYPAGE.target + '%\' order by RANDOM() limit 0,145';
				} else {
					MYPAGE.parentSql = 'SELECT * FROM question where `target` = \'' + MYPAGE.target + '\' order by id asc';
				}
				//				var func = function(db) {
				db.selectSql({
					name: 'data',
					sql: MYPAGE.parentSql
				}, function(ret, err) {
					if (ret.status) {
						hideWaiting();
						MYPAGE.questionNum = ret.data.length;
						renderQues(ret.data);
						localStorage.setItem('current', JSON.stringify(ret.data));
					} else {
						api.toast({
							msg: err.msg
						});
					}
				});
			}
			APP.openQDb(func);
		}
	</script>

</html>